<template>
  <div>
    <h1>home</h1>
    
    <!-- 字符串方式params传值 -->
    <!-- <router-link to="/home/music/1/3">华语</router-link>
    <router-link to="/home/music/2">粤语</router-link>
    <router-link to="/home/music/3/5">英语</router-link> -->


    <!-- 对象方式params传值 -->
    <!-- 
        注意事项:
          - to的对象写法中,如果和params一起使用,则不能书写path,只能使用name
          - 可选的params参数,要么不写,要么写一个undefined做为值,不能书写一个空字符串
       -->
    <router-link :to="{
      name: 'music',
      params:{
        id: '1',
        time: '3',
      }
    }">华语</router-link>

    <router-link :to="{
      name: 'music',
      params:{
        id: '2',
        time: undefined,
      }
    }">粤语</router-link>

    <router-link :to="{
      name: 'music',
      params:{
        id: '3',
        time: '5',
      }
    }">英语</router-link><br>


    <!-- 字符串方式query传参 -->
    <router-link to="/home/games?tit=qq飞车&verson=2019">游戏1</router-link>


    <!-- 对象方式query传参 -->
    <router-link :to="{
      //path: '/home/games', 
      name: 'games',
      query:{
        tit: '暴力摩托',
        verson: '2001',
      }
    }">游戏2</router-link>

    <!-- router-view是占位组件,用来存放路由组件  -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style>
</style>